import React, { Component } from 'react';
import axios from "axios";
import { Row, Col, Input, Icon, Carousel, Layout, Checkbox } from 'antd';
import "./index.css";
import Main from '../common/Main';
const { Content } = Layout;
class ShopCart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      showDelete: false
    }
  }
  componentDidMount() {
    var self = this;
    axios.get("./data/hotCommodityList.json", {}).then(
      (res) => {
        var data = res.data;
        self.setState({ list: data.result });
      }
    )
  }
  onListChange(list) {
    this.setState({
      list: list
    })
  }
  showDelete() {
    this.setState({
      showDelete: !this.state.showDelete
    });
  }
  onDeleteSelect() {
    var list = this.state.list.slice(), arr = [];

    for (var i = 0, l = list.length; i < l; i++) {
      if (!list[i].checked) {
        arr.push(list[i]);
      }
    }
    this.setState({
      list: arr.slice()
    });
  }
  onDeleteAll() {
    this.setState({
      list: []
    });
  }
  render() {
    return (
      <Main>
      <div className="ShopCart-page">
        <div className="top">
          <div className="title">购物车({this.state.list.length})</div>
          <div className="btn" onClick={() => this.showDelete()}>管理</div>
        </div>
        <div className={this.state.showDelete ? "deleteCommodity active" : "deleteCommodity"}>
          <div className="deleteAllBtn" onClick={() => this.onDeleteAll()}>
            删除全部
          </div>
          <div className="deleteSelectBtn" onClick={() => this.onDeleteSelect()}>
            删除选中
          </div>
        </div>
        <div className="ShopCart-content">
          <CartList showDelete={this.state.showDelete} list={this.state.list} onListChange={(list) => this.onListChange(list)}></CartList>
        </div>
        <Settlement list={this.state.list}></Settlement>
      </div>
      </Main>
    )
  }
}
class CartList extends Component {
  commodityNumChange(i, num) {
    var list = this.props.list;
    list[i].num = num;
    this.props.onListChange(list);
  }
  onSelectCommodity(i, checked) {
    var list = this.props.list;
    list[i].checked = checked;
    this.props.onListChange(list);
  }
  getList() {
    var list = this.props.list, arr = [];
    if (list.length === 0) {
      return (<NoCommodity />);
    } else {
      for (var i = 0, l = list.length; i < l; i++) {
        arr.push(<Commodity commodity={list[i]} key={i}
          onCommodityNumChange={(i, num) => this.commodityNumChange(i, num)}
          onSelectCommodity={(i, checked) => this.onSelectCommodity(i, checked)}
          index={i} />);
      }
      return arr;
    }
  }
  render() {
    return (
      <div className={this.props.showDelete ? "delete commodityList" : "commodityList"}>
        {this.getList()}
      </div>
    )
  }
}
class Commodity extends Component {
  minusNum() {
    if (this.props.commodity.num > 1) {
      this.props.onCommodityNumChange(this.props.index, --this.props.commodity.num);
    }
  }
  plusNum() {
    this.props.onCommodityNumChange(this.props.index, ++this.props.commodity.num);
  }
  onChange(e) {
    this.props.onSelectCommodity(this.props.index, e.target.checked);
  }
  getPrice() {
    return (this.props.commodity.price * this.props.commodity.num).toFixed(2);
  }
  render() {
    return (
      <Row className="commodity">
        <Col span={2} className="checkbox">
          <Checkbox checked={this.props.commodity.checked} onChange={(e) => this.onChange(e)}></Checkbox>
        </Col>
        <Col span={8} className="left-box">
          <img src={this.props.commodity.imgPath} alt="" />
        </Col>
        <Col span={14} className="right-box">
          <div className="name">{this.props.commodity.name}</div>
          <div className="desc">{this.props.commodity.desc}</div>
          <div className="price">￥{this.getPrice()}</div>
          <div className="num-box">
            <div className="minus" style={{ color: (this.props.commodity.num === 1 ? "#ddd" : "#666") }} onClick={() => this.minusNum()}>-</div>
            <div className="num">{this.props.commodity.num}</div>
            <div className="plus" onClick={() => this.plusNum()}>+</div>
          </div>
        </Col>
      </Row>
    )
  }
}
class Settlement extends Component {
  getPrice() {
    var list = this.props.list, price = 0;
    for (var i = 0, l = list.length; i < l; i++) {
      if (list[i].checked) {
        price += parseFloat(list[i].price * list[i].num);
      }
    }
    return price.toFixed(2);
  }
  getNum() {
    var list = this.props.list, num = 0;
    for (var i = 0, l = list.length; i < l; i++) {
      if (list[i].checked) {
        num++;
      }
    }
    return num;
  }
  render() {
    return (
      <div className="settlement">
        <div className="price">合计：<span className="value">￥{this.getPrice()}</span></div>
        <div className="btn">结算({this.getNum()})</div>
      </div>
    )
  }
}
class NoCommodity extends Component {
  render() {
    return (
      <div className="noCommodity">
        <p>购物车里啥都没有,</p>
        <p>赶紧去找喜欢的东西吧！</p>
      </div>
    )
  }
}
export default ShopCart;